<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>OGC_WMS</title>
    <!--引入第三方的jquery脚本库-->
    <script src="./static/libs/include-mapboxgl-local.js"></script>
    <!--引入当前页面样式表-->
    <link href="./static/demo/mapboxgl/example/style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        #map {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 100vh;
        }
    </style>
    <script>
        //使用严格模式
        "use strict";
        var map;
        var tiandituKey = "f5347cab4b28410a6e8ba5143e3d5a35";
        /**
         * 地图初始化
         */
        function init() {
            //实例化要加载的source来源对象（世界矢量地图）
            var dark = {
                type: "raster",
                tiles: [
                    //来源请求地址，请求天地图提供的全球矢量地图WMTS服务
                    "http://t0.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles" +
                    "&TILECOL=" +
                    "{x}" +
                    "&TILEROW=" +
                    "{y}" +
                    "&TILEMATRIX=" +
                    "{z}" +
                    "&tk=" +
                    tiandituKey,
                ],
                //栅格瓦片的分辨率
                tileSize: 256,
            };
            //实例化Map对象加载地图
            map = new mapboxgl.Map({
                crs: "EPSG:4326", //经纬度一定要设置crs参数
                maxBounds: [
                    [-180, -90],
                    [180, 90],
                ],
                //地图容器div的id
                container: "map",
                //设置地图样式信息
                style: {
                    //设置版本号，一定要设置
                    version: 8,
                    //添加来源
                    sources: {
                        dark: dark,
                    },
                    //设置加载并显示来源的图层信息
                    layers: [{
                        //图层id，要保证唯一性
                        id: "dark",
                        //图层类型
                        type: "raster",
                        //连接图层来源
                        source: "dark",
                        //图层最小缩放级数
                        minzoom: 0,
                        //图层最大缩放级数
                        maxzoom: 22,
                    }, ],
                },
                zoom: 7.5,
                center: [116.39, 40.20]
            });

            //注册地图加载事件
            var {
                protocol,
                ip,
                port
            } = window.webclient;
            map.on("load", function() {
                map.addLayer({
                    id: "wms-layer",
                    type: "raster",
                    source: {
                        type: "raster",
                        tiles: [
                            `${protocol}://${ip}:${port}/igs/rest/ogc/doc/北京市/WMSServer?` +
                            "service=WMS" +
                            "&request=GetMap" +
                            "&layers=" +
                            "北京市,绿地_1,绿地_2,绿地_3,绿地_4,水域_3,水域_2,水域_1,大学,学校,动物园,高尔夫,观光胜地,果园,住宅用地,医院,商业用地,建筑物,铁路_1,铁路_2,铁路_3,主干道,主干道,高速公路_1,高速公路_1_9-10,三级道路_链接,三级道路,二级道路_链接,二级道路,一级道路_链接,一级道路,主干道_链接,主干道,主干道,高速公路_链接,高速公路_2,高速公路_2,三级道路_链接,三级道路,二级道路_链接,二级道路,一级道路_链接,一级道路,地铁,主干道_链接,主干道,主干道,高速公路_链接,高速公路_2,高速公路_2,地铁站POI,山顶,果园poi,汽车站点POI,大学poi,学校poi,中小学POI,幼儿园POI,医院POI,口腔医院POI,派出所POI,检察院POI,银行POI,邮局POI,体育馆POI,纪念碑POI,博物馆POI,名胜古迹点,动物园poi,观光胜地poi,主题公园POI,宾馆POI,百货店POI,便利店POI,书店POI,快餐POI,咖啡馆POI,电影院POI,高尔夫poi,村庄点,市镇点,区县点,首都点" +
                            "&styles=" +
                            "&format=image/jpeg" +
                            "&transparent=false" +
                            "&version=1.1.1" +
                            "&height=512" +
                            "&width=512" +
                            "&srs=EPSG:4326" +
                            "&bbox={bbox}",
                        ],
                        tileSize: 512,
                    },
                    paint: {},
                });
            });
            //注册鼠标移动事件
            map.on('mousemove', function(e) {
                document.getElementById('mouse-position').innerHTML = "经度：" + e.lngLat.lng.toFixed(2) + "，纬度：" + e.lngLat.lat.toFixed(2);
            });
        }
    </script>
</head>

<body onload="init()">
    <div id="map">
        <div id="mouse-position">
        </div>
    </div>
</body>

</html>